<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>量化分析</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <h1 class="mb-3"></h1>
    <div class="form-group d-flex align-items-center">
        <label for="dateInput" class="mb-0 mr-2">选择日期:</label>
        <input type="date" id="dateInput" class="form-control mr-2" v-model="selectedDate" style="width: auto;">
        <!-- 查询按钮 -->
        <button class="btn btn-primary" @click="queryData">查询</button>
        <button class="btn btn-primary" @click="queryAllData">查询全部</button>

    </div>

        <table class="table table-bordered table-hover table-fixed">
            <thead class="thead-dark">
                <tr>
                    <th>代码</th>
                    <th>名称</th>
                    <th>涨跌幅</th>
                    <th>市值</th>
                    <th>概念名称</th>
                    <th>概念排名</th>
                    <th>概念rps</th>
                    <th>zhsl</th>
                    <th>成交额</th>
                    <th>bias10</th>
                    <th>bias20</th>
                    <th>timestamp</th>
                    <th>suggestion</th>
                    <th>rps</th>
                    <th>desc</th>
                    <th style="width: 300px;">操作</th> <!-- 新增“操作”列 -->
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in filteredData" :key="item.股票代码">
                     <td>{{ item.股票代码 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.change }}</td>
                    <td>{{ item.market_value }}</td>
                    <td>{{ item.concept_name }}</td>
                    <td>{{ item.concept_rank }}</td>
                    <td>{{ item.concept_rps_hs }}</td>
                    <td>{{ item.zhsl }}</td>
                    <td>{{ item.amount }}</td>
                    <td>{{ item.bias10 }}</td>
                    <td>{{ item.bias20 }}</td>
                    <td>{{ item.timestamp }}</td>
                    <td>{{ item.suggestion }}</td>
                    <td>{{ item.rps20 }}</td>
                    <td>{{ item.desc }}</td>
                    <td> <button class="btn btn-primary" @click="toggleModal(true), showDetail(item)">详情</button>
                    <button class="btn btn-warning" @click="toggleModal(true), sellStock(item)">卖出</button></td>
                </tr>
            </tbody>
        </table>

        <div class="modal" tabindex="-1" role="dialog" v-show="isModalVisible" @click.self="toggleModal(false)">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">详情</h5>

                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover">
            <thead class="thead-dark">
                <tr>
                    <th>股票代码</th>
                    <th>股票简称</th>
                    <th>连续涨停天数</th>
                    <th>涨跌幅</th>
                    <th>换手涨跌幅</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in stock_detial" :key="item.股票代码">
                    <td>{{ item.股票代码 }}</td>
                    <td>{{ item.股票简称 }}</td>
                    <td>{{ item.连续涨停天数 }}</td>
                    <td>{{ item.change }}</td>
                    <td>{{ item.hs_change }}</td>
                    <td>{{ item.remark }}</td>
                </tr>
            </tbody>
        </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @click="toggleModal(false)">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop" v-show="isModalVisible"></div>



        </div>
    </div>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                data: [],
                stock_detial:[],
                isModalVisible: false,
                stock_sell_detail:[],
                selectedDate: new Date().toISOString().substr(0, 10),
                filterBuy: false  // 控制是否筛选“不买”的记录
            },
            created: function() {
                // this.fetchData();
            },
                computed: {
                    filteredData: function() {
                        // 如果filterBuy为true，则过滤数据
                    if (this.filterBuy) {
                        return this.data.filter(item =>
                            !item.suggestion.includes("不买") &&
                            !item.suggestion.includes("没有可买的票")
                        );
                        } else {
                            return this.data;  // 如果filterBuy为false，返回所有数据
                        }
                    }
                },

            methods: {
            toggleModal: function(show) {
                this.isModalVisible = show;
            },
                sellStock:function (item){
                    const postData = {
                    query_date: this.selectedDate,
                    conceptName :item.concept_name,
                    stock_name : item.name

                };
                    axios.post('/sell_stock', postData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                 .then(response => {
                            console.log(response.data);
                            // this.stock_sell_detail = response.data;
                            this.stock_detial = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });

                },

                fetchData: function() {
                    const postData = {
                    query_date: this.selectedDate
                };

               axios.post('/', postData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                        .then(response => {
                            console.log(response.data);
                            this.data = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },
                fetchAllData: function() {
                    const postData = {
                    query_date: this.selectedDate
                };

               axios.post('/all', postData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                        .then(response => {
                            console.log(response.data);
                            this.data = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },

                showDetail(item) {
                    const postData = {
                    timestamp: item.timestamp,
                    conceptName :item.concept_name,
                    stock_name : item.name

                };
                    axios.post('/stock_detail', postData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                 .then(response => {
                            console.log(response.data);
                            // this.stock_sell_detail = response.data;
                            this.stock_detial = response.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });

    }, queryData: function() {
            // 在这里使用 selectedDate 来查询数据
            console.log("查询日期：", this.selectedDate);
            this.fetchData(this.selectedDate);
        },
                queryAllData: function() {
            // 在这里使用 selectedDate 来查询数据
            console.log("查询日期：", this.selectedDate);
            this.fetchAllData(this.selectedDate);
        }

            }
        });
    </script>
</body>
<style>
    .modal {
        display: block; /* Show modal by default to make it easy with v-show */
    }
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
        display: none; /* Hide modal backdrop by default */
    }
    .table-fixed thead {
    position: sticky;
    top: 0;
    z-index: 1020; /* Ensure the header is above other content */
    background-color: #fff; /* Background color to ensure text is readable */
}

/* Optional: Add a box shadow to the fixed header for better visibility */
.table-fixed thead th {
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
}
</style>

</html>
